<template>
    <div class="sidebar">
        <div class="fixedSidePage">
            <p v-for="(item,index) in list" :key="index">
                <a @click="jumpTo(item)">
                    <span class="icon-page icon">
                        <img :src="'../../static/images/'+item.name+'.png'">
                    </span>
                    <span class="text">{{item.name}}</span>
                </a>
            </p>
        </div>
    </div>
</template>

<script>
import bus from "./bus";
export default {
    data() {
        return {
            collapse: false,
            list: [
                {
                    name: "系统首页",
                    url: "",
                    isActive: false
                },
                {
                    name: "组织管理",
                    url: "zzgl",
                    children: [
                        {
                            name: "党组织管理",
                            url: "Dzzgl",
                            isActive: false
                        }
                    ]
                },
                {
                    name: "党建宣传",
                    url: "",
                    isActive: false
                },
                {
                    name: "工作新闻",
                    url: "",
                    isActive: false
                },
                {
                    name: "党务工作",
                    url: "",
                    isActive: false
                },
                {
                    name: "党员发展",
                    url: "",
                    isActive: false
                },
                {
                    name: "组织生活",
                    url: "",
                    isActive: false
                },
                {
                    name: "党费缴纳",
                    url: "",
                    isActive: false
                },
                {
                    name: "学习教育",
                    url: "",
                    isActive: false
                },
                {
                    name: "任务管理",
                    url: "",
                    isActive: false
                },
                {
                    name: "服务管理",
                    url: "",
                    isActive: false
                }
            ],
            items: [
                {
                    icon: "el-icon-lx-home",
                    index: "dashboard",
                    title: "系统首页"
                },
                {
                    icon: "el-icon-lx-cascades",
                    index: "table",
                    title: "基础表格"
                },
                {
                    icon: "el-icon-lx-copy",
                    index: "tabs",
                    title: "tab选项卡"
                },
                {
                    icon: "el-icon-lx-calendar",
                    index: "3",
                    title: "表单相关",
                    subs: [
                        {
                            index: "form",
                            title: "基本表单"
                        },
                        {
                            index: "3-2",
                            title: "三级菜单",
                            subs: [
                                {
                                    index: "editor",
                                    title: "富文本编辑器"
                                },
                                {
                                    index: "markdown",
                                    title: "markdown编辑器"
                                }
                            ]
                        },
                        {
                            index: "upload",
                            title: "文件上传"
                        }
                    ]
                },
                {
                    icon: "el-icon-lx-emoji",
                    index: "icon",
                    title: "自定义图标"
                },
                {
                    icon: "el-icon-lx-favor",
                    index: "charts",
                    title: "schart图表"
                },
                {
                    icon: "el-icon-rank",
                    index: "6",
                    title: "拖拽组件",
                    subs: [
                        {
                            index: "drag",
                            title: "拖拽列表"
                        },
                        {
                            index: "dialog",
                            title: "拖拽弹框"
                        }
                    ]
                },
                {
                    icon: "el-icon-lx-warn",
                    index: "7",
                    title: "错误处理",
                    subs: [
                        {
                            index: "permission",
                            title: "权限测试"
                        },
                        {
                            index: "404",
                            title: "404页面"
                        }
                    ]
                }
            ]
        };
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace("/", "");
        }
    },
    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on("collapse", msg => {
            this.collapse = msg;
        });
    },
    methods:{
        jumpTo(item){
            this.$router.push({name:item.url})
        }
    }
};
</script>

<style scoped lang="scss">
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    bottom: 0;
    overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 78px;
}
.sidebar > ul {
    height: 100%;
}
.fixedSidePage {
    width: 78px;
    height: 100%;
    background: #b71a00;
    overflow: hidden;
    position: relative;
    p {
        height: 86px;
        .icon {
            display: block;
            margin-top: 17px;
            text-align: center;
        }
        .text {
            display: block;
            padding-top: 8px;
            color: #ffffff;
            font-size: 14px;
            text-align: center;
        }
    }
    .fixedBottom {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        img {
            margin: 0 auto;
        }
        .notice {
            display: block;
            text-align: center;
            margin-bottom: 40px;
        }
        .exit {
            display: block;
            text-align: center;
            margin-bottom: 15px;
        }
    }
}
@media screen and (max-width: 1400px) {
    .fixedSidePage {
        width: 78px;
        height: 100%;
        background: #b71a00;
        overflow: hidden;
        position: relative;
        p {
            height: 76px;
            .icon {
                display: block;
                margin-top: 7px;
                text-align: center;
            }
            .text {
                display: block;
                padding-top: 8px;
                color: #ffffff;
                font-size: 14px;
                text-align: center;
            }
        }
        .fixedBottom {
            img {
                margin: 0 auto;
            }
            .notice {
                display: block;
                text-align: center;
                margin-bottom: 20px;
            }
            .exit {
                display: block;
                text-align: center;
                margin-bottom: 15px;
            }
        }
    }
}
</style>
